<template>
  <VDistpicker :province='select.province' :city='select.city' :area='select.area' @province="changeProvince" @city="changeCity" @area="changeArea"></VDistpicker>
</template>

<script>
  import VDistpicker from 'v-distpicker'
  export default{
    name:'DistPicker',
    props:['dist','catchProvince','catchCity','catchArea'],
    data(){
      return {
        select:{
          province:'',
          city:'',
          area:''
        }
      }
    },
    watch:{
       dist(val){
         this.select.province=val.province;
         this.select.city=val.city;
         this.select.area=val.area;
       }
    },
    components:{VDistpicker},
    methods:{
      changeProvince(e){
        this.catchProvince(e.value);
      },
      changeCity(e){
        this.catchCity(e.value);
      },
      changeArea(e){
        this.catchArea(e.value);
      }
    }
  }
</script>

<style>
</style>
